Making Peach Ice Cream

Question:

I scream, you scream…

ice cream image

Time to switch gears! For this quiz, you'll be fixing a webpage that showcases my mom's homemade peach ice cream recipe. Yum! 🍦 🍨

There are some issues with the webpage. It's using the default content-box for box-sizing and needs some tweaks done to the spacing between elements. Also, the recipe is enclosed inside a container, but the container is positioned all wrong. You'll need to set the width of the container and center it using a special trick with margin.

Centering Boxes

When you set the width of a block element, it keeps the element from taking up the entire width of its container (as long as you set its width to something less than 100%). However, when you do this, the element stays fixed to the left side of the container. What if you want to center it?

margin auto image

In this animation, the container is the width of the browser and the blue box is being centered inside the container.

If you use the special keyword auto on the left and right margins of an element, you can horizontally center the element within its container. The combination of a set width and margin: 0 auto; (this is the shorthand way of writing margin) will make the element take up the width you specify, and then the remaining horizontal space will be split "automatically" between the left and right margins. You see this used on a ton of websites!

Note: If you try this recipe, tell us about it! Share pictures in the forums and let us know how it matches up with other ice creams you've had. Sidenote, this recipe is all about the peaches. The better the peaches, the better the ice cream!

Start Quiz:

Solution:

I'm getting hungry!

Anyway, your answer should have looked like this…

ice cream solution

If you look at the final result, you can tell that with just a few small tweaks to the CSS, the recipe has started to take shape.

By adjusting the page to use box-sizing: border-box , the recipe summary and image both align at the top of the page. However, it's not just border-box alone that is helping us achieve this affect, in fact, both the recipe summary and image have a width of 50% and use a property called float in order to line up side-by-side like seen in solution. In the next lesson, we'll cover float and other positioning properties that will allow you to take full control of the layouts on your webpages.

Also, the adjustment to the recipe container's width, combined with margin: 0 auto , centered the entire recipe in the middle of the "page".

.recipe {
  /* ... */
  width: 800px;
  margin: 0 auto;
}

The next three adjustments focused on small aesthetic changes by adding spacing above and below the section titles, as well as using <em> to create an emphasis on the recipe's author (Hey, that's me 😎 !). Pay attention to the changes for padding and margin on the section titles; specifically the padding. It was used to add space between the content (the actual title itself) and the border that was being drawn underneath it.

padding bottom animation

The padding is added below the content, but between the border.

Finally, the last adjustment was made to the recipe notes. By changing these to display: inline , the width of the notes were constrained to the content. Therefore, the notes lined up next to each other, rather than one on top of the other.

recipe notes image

Can you guess what each icon represents in the recipe notes?

INSTRUCTOR NOTE:

How to Complete this Quiz

Download the peach ice cream recipe site from the resources section or from here.
Make your site look like the final site. The annotated version of the final site is there to help you out.
Edit the site using your favorite text editor. You'll definitely need to add CSS. There are also a few <div>s that you might be able to turn into semantic elements. Experiment and see what what happens.
Turn on the Udacity Feedback Chrome Extension.
When all of the tests pass, you'll get a code. Copy and paste the code that appears into the next page to finish!

Good luck!

Next Concept